<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>AgoraAudioIO Web</title>
</head>

<body class="agora-theme">
  <div class="navbar-fixed">
    <nav class="agora-navbar">
      <div class="nav-wrapper agora-primary-bg valign-wrapper">
        <h5 class="left-align">AgoraAudioIO Web</h5>
        <a href="https://github.com/AgoraIO/Advanced-Audio/tree/master/Web/AgoraAudioIO-Web-Webpack" class="agora-github-pin"></a>
      </div>
    </nav>
  </div>
  <form id="form" class="row col l12 s12">
    <div class="row container col l12 s12">
      <div class="col" style="width: 433px;">
        <div class="card" style="margin-top: 0px; margin-bottom: 0px;">
          <div class="row card-content" style="margin-bottom: 0px;">
              <div class="input-field">
                <label for="appID" class="active">App ID</label>
                <input type="text" placeholder="App ID" name="appID">
              </div>
              <div class="input-field">
                <label for="channel" class="active">Channel</label>
                <input type="text" placeholder="channel" name="channel">
              </div>
              <div class="input-field">
                <label for="token" class="active">Token</label>
                <input type="text" placeholder="token" name="token">
              </div>
              <!-- audio mixing -->
              <div class="row">
                <div class="col input-field s12">
                  <label for="audio_mixing_resources" class="active">Audio Mixing</label>
                  <select name="audio_mixing_file" id="audio_mixing_file">
                    <option value="./assets/music_1.m4a">music_1.m4a</option>
                    <option value="./assets/biggie.mp3">biggie.mp3</option>
                    <option value="./assets/garden.mp3">garden.mp3</option>
                  </select>
                  <div class="col">
                    <form>
                    <label>
                      <input value="play" type="radio" class="with-gap audio_mixing_state" name="audio_mixing_radios" />
                      <span>play</span>
                    </label>
                    <label>
                      <input  id="stop_mixing" value="stop" type="radio" class="with-gap audio_mixing_state" name="audio_mixing_radios" checked/>
                      <span>stop</span>
                    </label>
                    <label>
                      <input value="pause" type="radio" class="with-gap audio_mixing_state" name="audio_mixing_radios" />
                      <span>pause</span>
                    </label>
                    <label>
                      <input value="resume" type="radio" class="with-gap audio_mixing_state" name="audio_mixing_radios" />
                      <span>resume</span>
                    </label>
                  </form>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col input-field s12">
                  <label for="" class="active">Audio Effects</label>
                  <select id="audio_effect_files" multiple>
                    <option value="./assets/effectA.wav" selected>effectA.wav</option>
                    <option value="./assets/effectB.wav">effectB.wav</option>
                  </select>
                  <div class="col">
                    <form>
                    <label>
                      <input value="play" type="radio" class="with-gap audio_effect_state" name="audio_mixing_radios" />
                      <span>play</span>
                    </label>
                    <label>
                      <input id="stop_effect" value="stop" type="radio" class="with-gap audio_effect_state" name="audio_mixing_radios" checked/>
                      <span>stop</span>
                    </label>
                    <label>
                      <input value="pause" type="radio" class="with-gap audio_effect_state" name="audio_mixing_radios" />
                      <span>pause</span>
                    </label>
                    <label>
                      <input value="resume" type="radio" class="with-gap audio_effect_state" name="audio_mixing_radios" />
                      <span>resume</span>
                    </label>
                    </form>
                  </div>
                </div>
              </div>
              <!-- audio mixing -->
              <div class="row" style="margin: 0">
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="join">JOIN</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="leave">LEAVE</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="publish">PUBLISH</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="unpublish">UNPUBLISH</button>
              </div>
              <div class="row col" style="margin: 0">
                <div class="switch">
                  <h6 style="color: rgba(0,0,0,.26);">Show Profile</h6>
                  <label>
                    <input id="show_profile" type="checkbox">
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
          </div>
        </div>
        <ul class="collapsible card agora-secondary-border" style="margin-top: .4rem; border: 1px ">
          <li>
            <div class="collapsible-header agora-secondary-bg">
              <h8 class="center-align">ADVANCED SETTINGS</h8>
            </div>
            <div class="collapsible-body card-content">
              <div class="row">
                <div class="col s12">
                  <div class="input-field">
                    <label for="UID" class="active">UID</label>
                    <input type="number" placeholder="UID" name="uid">
                  </div>
                  <div class="input-field">
                    <label for="cameraId" class="active">CAMERA</label>
                    <select name="cameraId" id="cameraId"></select>
                  </div>
                  <div class="input-field">
                    <label for="microphoneId" class="active">MICROPHONE</label>
                    <select name="microphoneId" id="microphoneId"></select>
                  </div>
                  <div class="input-field">
                    <label for="cameraResolution" class="active">CAMERA RESOLUTION</label>
                    <select name="cameraResolution" id="cameraResolution"></select>
                  </div>
                  <div class="row col s12">
                    <div class="row">
                      <label for="mode" class="active">MODE</label>
                    </div>
                    <div class="row">
                      <label>
                        <input type="radio" class="with-gap" name="mode" value="live" checked />
                        <span>live</span>
                      </label>

                      <label>
                        <input type="radio" class="with-gap" name="mode" value="rtc" />
                        <span>rtc</span>
                      </label>
                    </div>
                  </div>
                  <div class="row col s12">
                    <div class="row">
                      <label for="codec" class="active">CODEC</label>
                    </div>
                    <div class="row">
                      <label>
                        <input type="radio" class="with-gap" name="codec" value="h264" checked />
                        <span>h264</span>
                      </label>

                      <label>
                        <input type="radio" class="with-gap" name="codec" value="vp8" />
                        <span>vp8</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
          </li>
        </ul>
      </div>
      <div class="col s7">
        <div class="video-grid" id="video">
          <div class="video-view">
            <div id="local_stream" class="video-placeholder"></div>
            <div id="local_video_info" class="video-profile hide"></div>
            <div id="video_autoplay_local" class="autoplay-fallback hide"></div>
          </div>
        </div>
      </div>
    </div>
  </form>
</body>
</html>